<h2>ng-book2</h2>
<fieldset>
  <h2>NgForm</h2>
  <form id="ngForm" #f="ngForm" (ngSubmit)="onNgFormSubmit(f.value)">
    <div class="field">
      <input type="text" name="sku" ngModel>
    </div>
    <div class="field">
      <input type="number" name="age" ngModel>
    </div>
    <input type="submit" value="Submit">
  </form>
</fieldset>

<fieldset>
  <h2>Form Builder</h2>
  <div id="formBuilder">
    <form [formGroup]="fbModel" (ngSubmit)="onFormBuilderSubmit(fbModel.value)">
      <div class="field" [class.error]="!fbModelSku.valid && fbModelSku.touched">
        <input type="text" [formControl]="fbModel.controls['sku']">
      </div>
      <div class="field">
        <input type="number" [formControl]="fbModel.controls['age']">
      </div>
      <input type="submit" value="Submit">
    </form>
    <div *ngIf="!fbModelSku.valid">SKU is invalid</div>
    <div *ngIf="fbModelSku.hasError('required')">SKU is required</div>
    <div *ngIf="fbModelSku.hasError('invalidSku')">SKU must begin with <span>123</span></div>
    <div *ngIf="!fbModel.valid">Form is invalid</div>
  </div>
</fieldset>

<fieldset>
  <div id="control">
    <input type="text" (change)="onChange()" [formControl]="nameControl">
  </div>

  <div id="group">
    <form [formGroup]="person">

    </form>
  </div>
</fieldset>

<hr>

<h2>ng2 docs</h2>
<fieldset>
  <h2>Form</h2>
  <div id="docsForm">
    <form #heroForm="ngForm" (ngSubmit)="onDocsFormSubmit(f.value)">
      <div class="field">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" class="form-control" #name="ngModel"
               [(ngModel)]="hero.name" required minlength="4" maxlength="24">
        <div [hidden]="!name.hasError('required')">Name is required</div>
        <div>{{name.className}}</div>

        <div *ngIf="name.errors && (name.dirty || name.touched)">
          <div [hidden]="!name.errors.required">Name is required</div>
          <div [hidden]="!name.errors.minlength">Name must be at least 4 characters long.</div>
          <div [hidden]="!name.errors.maxlength">Name cannot be more than 24 characters long.</div>
        </div>
      </div>
      <hr>
      <div class="field">
        <label for="name2">Name</label>
        <input id="name2" name="name2" type="text" class="form-control" #name2="ngModel"
               [(ngModel)]="hero.name2" required minlength="4" maxlength="24">
        <div [hidden]="!name2.hasError('required')">Name is required</div>
        <div>{{name2.className}}</div>

        <div *ngIf="name.errors && (name.dirty || name.touched)">
          <div [hidden]="!name.errors.required">Name is required</div>
          <div [hidden]="!name.errors.minlength">Name must be at least 4 characters long.</div>
          <div [hidden]="!name.errors.maxlength">Name cannot be more than 24 characters long.</div>
        </div>
      </div>
      <hr>
      <div class="field">
        <label for="alterEgo">Alter Ego</label>
        <input id="alterEgo" name="alterEgo" type="text" class="form-control"
               [(ngModel)]="hero.alterEgo">
      </div>
      <hr>
      <div class="field">
        <label for="power">Hero Power</label>
        <select id="power" name="power" class="form-control"
                [(ngModel)]="hero.power" required>
          <option *ngFor="let power of heroPowers" [value]="power">{{power}}</option>
        </select>
      </div>
      <div class="field">
        <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
      </div>
    </form>
    <hr>
  </div>
</fieldset>